<template>
  <div id="service_request_con" style="width:100%;height:100%;" />
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'ServiceRequests',
  props: ['sqlTrendChart'],
  watch: {
      sqlTrendChart: function(newVal,oldVal){
          this.init()
      }
  },
  methods: {
    init() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '3%',
          left: '1.2%',
          right: '1.2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.sqlTrendChart.dateList
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'SQL工单数',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
              color: '#2d8cf0'
            }},
            data: this.sqlTrendChart.numList
          }
        ]
      }
      const ServiceRequests = echarts.init(document.getElementById('service_request_con'))
      ServiceRequests.setOption(option)

      window.addEventListener('resize', function() {
        ServiceRequests.resize()
      })
    }
  }
}
</script>
